<template>
  <div class="container">
    <div class="close"><span class="iconfont iconicon-test"></span></div>
    <div class="logo"><span class="iconfont iconnew"></span></div>
    <div class="inputs">
      <!-- 账号框 -->
      <itInput
        placeholder="请输入账号/手机号"
        :rules="/^\w{11}$/"
        @input="get_username"
        inputType="text"
        class_accurate="user666"
        tishi="11位的字母、数字、下划线或手机号"
      ></itInput>

      <!-- 昵称框 -->
      <itInput
        placeholder="请输入昵称"
        :rules="/^[\u4E00-\u9FA5A-Za-z0-9_]{3,12}$/"
        @input="get_nickname"
        inputType="text"
        class_accurate="nick666"
        tishi="3-12位的中文、英文、数字、下划线"
      ></itInput>

      <!-- 密码框 -->
      <itInput
        placeholder="请输入密码"
        :rules="/^\w{3,16}$/"
        @input="get_password"
        inputType="password"
        class_accurate="pass666"
        tishi="3-16位的字母、数字、下划线"
      ></itInput>
    </div>
    <p class="tips">
      已有账号？
      <a href="/login" class="">去登录</a>
    </p>
    <!-- 按钮组件 -->
    <itButton :type="btn_color" @click="register">注册</itButton>
  </div>
</template>

<script>
// 引入组件：按钮
import itButton from "@/components/itButton.vue";
// 引入组件：输入框
import itInput from "@/components/itInput.vue";

// 引入Apis：用户
import { userRegister } from "@/apis/user.js";

export default {
  data() {
    return {
      user: {
        username: "",
        nickname: "",
        password: "",
      },

      btn_flag: false, //按钮开关
      btn_color: "", //按钮颜色
    };
  },
  //   方法：
  methods: {
    // 按钮开关
    isBtn() {
      if (
        /^\w{11}$/.test(this.user.username) &&
        /^\w{3,16}$/.test(this.user.password) &&
        /^[\u4E00-\u9FA5A-Za-z0-9_]{3,12}$/.test(this.user.nickname)
      ) {
        this.btn_flag = true;
        this.btn_color = "success";
      } else {
        this.btn_flag = false;
        this.btn_color = "";
      }
    },
    //   注册：
    async register() {
      if (this.btn_flag) {
        if (
          /^\w{11}$/.test(this.user.username) &&
          /^\w{3,16}$/.test(this.user.password) &&
          /^[\u4E00-\u9FA5A-Za-z0-9_]{3,12}$/.test(this.user.nickname)
        ) {
          try {
            let res = await userRegister(this.user);
            console.log(res);
            if (res.status == 200) {
              this.$toast.success("注册成功");
              setTimeout(() => {
                // location.href = "/login";
                this.$router.push({ name: "login" });
              }, 1000);
            }
          } catch (err) {
            this.$toast.success("注册失败");
          }
        }
      }
    },
    //  用户名输入框：
    get_username(e) {
      // console.log(e.e.target.value);
      this.user.username = e.e.target.value;
      console.log(this.user.username);
      // 按钮开关函数
      this.isBtn();
    },

    //  昵称输入框：
    get_nickname(e) {
      this.user.nickname = e.e.target.value;
      console.log(this.user.nickname);
      // 按钮开关函数
      this.isBtn();
    },

    //  密码输入框：
    get_password(e) {
      // console.log(e.e.target.value);
      this.user.password = e.e.target.value;
      console.log(this.user.password);
      // 按钮开关函数
      this.isBtn();
    },
  },
  // 注册组件
  components: {
    itButton,
    itInput,
  },
};
</script>

// 样式：
<style lang="less" scoped>
.container {
  padding: 20px;
}
.close {
  span {
    font-size: 27 / 360 * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;
  span {
    display: block;
    font-size: 126 / 360 * 100vw;
    color: #d81e06;
  }
}
// .inputs {
//   input {
//     margin-bottom: 20px;
//   }
// }
.tips {
  text-align: right;
  margin-bottom: 20px;
  a {
    color: #3385ff;
  }
}
</style>